<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
<template>
  <view>
    <view class="uni-margin-wrap">
      <swiper
        class="swiper"
        circular
        :indicator-dots="data.indicatorDots"
        :autoplay="data.autoplay"
        :interval="data.interval"
        :duration="data.duration"
      >
        <swiper-item v-for="item in list" :key="item.id" class="swiper-item">
          <navigator url="" hover-class="none" class="navigator">
            <image :src="item.imgUrl" mode="aspectFill" class="image" />
          </navigator>
        </swiper-item>
      </swiper>
    </view>
  </view>
</template>

<script setup lang="ts">
import type { BannerItem } from '@/types/home'
import { reactive } from 'vue'

const data = reactive({
  indicatorDots: true,
  autoplay: true,
  interval: 2000,
  duration: 500,
})
defineProps<{ list: BannerItem[] }>()
</script>
<style lang="scss" scoped>
.uni-margin-wrap {
  width: 690rpx;
  width: 100%;
  .swiper {
    height: 300rpx;
    .swiper-item {
      display: block;
      height: 300rpx;
      line-height: 300rpx;
      text-align: center;
      .navigator {
        height: 100%;
        width: 100%;
      }
    }
  }
}
</style>
